<template>
  <!-- 登录页面容器 -->
  <div class="login-page">
    <!-- 登录表单卡片 -->
    <div class="login-card">
      <!-- 页面标题 -->
      <h1 class="login-title">用户登录</h1>
      
      <!-- 登录表单 -->
      <el-form 
        ref="loginFormRef" // 表单引用，用于表单验证
        :model="loginForm" // 表单数据模型
        :rules="loginRules" // 表单验证规则
        class="login-form" // CSS类名
        @submit.prevent="handleLogin" // 表单提交事件处理
      >
        <!-- 用户名输入框 -->
        <el-form-item prop="username"> <!-- prop属性用于验证规则绑定 -->
          <el-input
            v-model="loginForm.username" // 双向绑定用户名
            placeholder="请输入用户名" // 占位符文本
            prefix-icon="User" // 输入框前缀图标
            size="large" // 输入框大小
            clearable // 可清空
            @keyup.enter="handleLogin" // 回车键触发登录
          />
        </el-form-item>
        
        <!-- 密码输入框 -->
        <el-form-item prop="password"> <!-- prop属性用于验证规则绑定 -->
          <el-input
            v-model="loginForm.password" // 双向绑定密码
            type="password" // 输入框类型：密码
            placeholder="请输入密码" // 占位符文本
            prefix-icon="Lock" // 输入框前缀图标
            size="large" // 输入框大小
            show-password // 显示密码切换按钮
            clearable // 可清空
            @keyup.enter="handleLogin" // 回车键触发登录
          />
        </el-form-item>
        
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            type="primary" // 按钮类型：主要按钮
            size="large" // 按钮大小
            :loading="userStore.loading" // 加载状态，显示loading效果
            class="login-button" // CSS类名
            @click="handleLogin" // 点击事件处理
          >
            <!-- 按钮文本，根据加载状态显示不同内容 -->
            {{ userStore.loading ? '登录中...' : '登录' }}
          </el-button>
        </el-form-item>
      </el-form>
      
      <!-- 注册链接 -->
      <div class="register-link">
        <span>还没有账号？</span> <!-- 提示文本 -->
        <el-link 
          type="primary" // 链接类型：主要
          @click="goToRegister" // 点击跳转到注册页面
        >
          立即注册
        </el-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue' // 导入Vue 3的组合式API函数
import { useRouter } from 'vue-router' // 导入Vue Router的useRouter函数
import { useUserStore } from '@/stores/user' // 导入用户状态管理store
import { ElMessage } from 'element-plus' // 导入Element Plus的消息提示组件
import type { FormInstance, FormRules } from 'element-plus' // 导入Element Plus的表单类型定义

// 获取路由实例
const router = useRouter() // 创建路由实例，用于页面跳转

// 获取用户状态管理store实例
const userStore = useUserStore() // 创建用户store实例，用于管理用户状态

// 表单引用
const loginFormRef = ref<FormInstance>() // 创建表单引用，用于表单验证和重置

// 登录表单数据
const loginForm = reactive({ // 使用reactive创建响应式表单数据对象
  username: '', // 用户名，初始值为空字符串
  password: '' // 密码，初始值为空字符串
})

// 表单验证规则
const loginRules: FormRules = { // 定义表单验证规则对象
  username: [ // 用户名字段验证规则
    { 
      required: true, // 必填项
      message: '请输入用户名', // 错误提示信息
      trigger: 'blur' // 触发时机：失去焦点时验证
    },
    { 
      min: 3, // 最小长度
      max: 20, // 最大长度
      message: '用户名长度在 3 到 20 个字符', // 错误提示信息
      trigger: 'blur' // 触发时机：失去焦点时验证
    }
  ],
  password: [ // 密码字段验证规则
    { 
      required: true, // 必填项
      message: '请输入密码', // 错误提示信息
      trigger: 'blur' // 触发时机：失去焦点时验证
    },
    { 
      min: 6, // 最小长度
      max: 20, // 最大长度
      message: '密码长度在 6 到 20 个字符', // 错误提示信息
      trigger: 'blur' // 触发时机：失去焦点时验证
    }
  ]
}

// 处理登录方法
const handleLogin = async () => {
  try {
    // 表单验证
    await loginFormRef.value?.validate() // 等待表单验证完成
    
    // 调用用户store的登录方法
    const result = await userStore.login(loginForm.username, loginForm.password) // 传入用户名和密码
    
    // 检查登录结果
    if (result.success) {
      // 登录成功
      ElMessage.success('登录成功！') // 显示成功消息
      router.push('/') // 跳转到首页
    } else {
      // 登录失败
      ElMessage.error(result.message || '登录失败') // 显示错误消息
    }
  } catch (error) {
    // 捕获验证错误或其他异常
    console.error('登录错误:', error) // 错误日志
    ElMessage.error('请检查输入信息') // 显示错误消息
  }
}

// 跳转到注册页面方法
const goToRegister = () => {
  router.push('/register') // 使用路由跳转到注册页面
}
</script>

<style scoped>
/* 登录页面样式 */
.login-page {
  min-height: 100vh; /* 最小高度为视口高度 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
  padding: 20px; /* 内边距 */
}

/* 登录卡片样式 */
.login-card {
  background: white; /* 白色背景 */
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  padding: 40px; /* 内边距 */
  width: 100%; /* 宽度100% */
  max-width: 400px; /* 最大宽度 */
}

/* 登录标题样式 */
.login-title {
  text-align: center; /* 文本居中 */
  margin-bottom: 30px; /* 下边距 */
  color: #333; /* 文字颜色 */
  font-size: 24px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
}

/* 登录表单样式 */
.login-form {
  margin-bottom: 20px; /* 下边距 */
}

/* 登录按钮样式 */
.login-button {
  width: 100%; /* 宽度100% */
  height: 48px; /* 高度 */
  font-size: 16px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
}

/* 注册链接样式 */
.register-link {
  text-align: center; /* 文本居中 */
  color: #666; /* 文字颜色 */
  font-size: 14px; /* 字体大小 */
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-card {
    padding: 20px; /* 小屏幕时减少内边距 */
  }
  
  .login-title {
    font-size: 20px; /* 小屏幕时减小字体 */
  }
}
</style> 